<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTSP视频监控</title>
    <link rel="stylesheet" href="/rtsp/css/style.css">
</head>
<body>
<div class="container">
    <h1>RTSP视频监控</h1>

    <div class="control-panel">
        <button id="startBtn">开始播放</button>
        <button id="pauseBtn" disabled>暂停</button>
        <button id="stopBtn" disabled>停止播放</button>
        <div class="stats">
            <span>状态: <span id="statusText">未连接</span></span>
            <span>延迟: <span id="latency">-</span>ms</span>
            <span>帧率: <span id="fps">-</span>fps</span>
        </div>
    </div>

    <div class="video-container">
        <canvas id="videoCanvas"></canvas>
    </div>
</div>

<script src="/rtsp/js/player.js"></script>
</body>
</html>
